@include('common.header')
<link rel="stylesheet" href="{{ asset('/css/style.css') }}">
<script type="text/javascript">
	
	// 执行取消订单
	function cancle()
	{
		// 获取订单id
		var oid = $("#oid").html();
		$.ajax({
			type:"post",
			url:"{{ url('/cancle') }}",
			data:{oid:oid,_token:_token},
			async:false,   // 同步操作						
			dataType: "json",
			beforeSend:function()
			{
				$(".opa").css('display','block'); 
				$(".opa").html("正在取消订单..."); 
			},
			success:function( back )
			{
				$(".opa").html( back['show_info'] );
				$(".opa").delay(1500).slideUp(1000);
				if( back['show_info'].indexOf("成功") > 0 )
				{
					setTimeout(function(){
						window.location.reload(); 
					},1500);
					
				}
				
			}
		});
	}

	
	
</script>


<!-- 订单搜索 -->
<div class="row" style="width:100%;margin-top:5%;" >
	<div class="col-md-4" >
		<nav style="margin-right:-100px;">
			<ol class="cd-breadcrumb custom-separator custom-icons" style="width:230px;" >
				<li><a href="{{ url('/') }}">首页</a></li>
				<li class="current"><a href="{{ url('/order') }}">订单列表</a></li>
			</ol>
		</nav>
	</div>
	<div class="col-md-4" style="text-align:left;margin-top:20px;">
		<!-- 搜索框 -->
		<form action="{{ url('/order') }}" method='post'   >
			<div class="input-group" style="width:400px;"  >
				{{ csrf_field() }}
				<input  type="text" name='keyword' class="form-control" placeholder="输入订单号...." value="{{ $request or '' }}" style="border-radius:10px 0px 0px 10px;" />
				<span class="input-group-btn">
					<input class="btn btn-success" type="submit" value="Go!" />
					<a class="btn btn-default" href="{{ url('/order') }}" style="border-radius:0px 10px 10px 0px;" />清空条件</a>
				</span>
			</div>
		</form>
	</div>
	<div class="col-md-4" style="margin-top:60px;">
		<div id="3d" style="margin-left:-100px;" ></div>
	</div>
</div>


<!-- 取消订单模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="top:20%;" >
	<div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="modal-body" id="rizhi-body" style="height:auto;display:block;font-size:20px;" >
				订单编号：<span id="oid" ></span>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" style="margin-right:120px;" data-dismiss="modal" onclick="cancle();" >确认取消</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>
			</div>
		</div>
	</div>
</div>


<!-- 分页 -->
<div style='text-align:center;'>
	{{ $orders->appends(['keyword'=>$request])->links() }}
</div>

<!-- 订单列表 -->
<div style="float:left;width:100%;height:auto;margin-bottom:10px;">
	
	@forelse( $orders as $order_key=> $order )
	<div style="float:left;width:90%;height:155px;margin-left:4.8%;">
		
		
		<div style="float:left;width:100%;height:40px;background-color:#CDCDB4;">
			<div style="float:left;font-size:18px;margin-top:6px;margin-left:30px;">
				订单编号：
			</div>
			<div style="float:left;font-size:18px;margin-top:6px;width:80px;">
				{{ $order->id }}
			</div>
			<div style="float:left;font-size:18px;margin-top:6px;margin-left:10px;">
				订单类型：
			</div>
			<div style="float:left;font-size:18px;margin-top:6px;width:45px;">
				{{ $order->typeInfo }}
			</div>
			<div style="float:left;font-size:18px;margin-top:6px;margin-left:16.3%;width:150px;">
				用户
			</div>
			<div style="float:left;font-size:18px;margin-top:6px;margin-left:30px;width:100px;">
				交易额
			</div>
			<div style="float:left;font-size:18px;margin-top:6px;margin-left:30px;width:180px;">
				下单时间
			</div>
			@if( $order->status==1 )
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm" onclick="$('#oid').html( {{$order->id}} );" style="margin-top:3px;" >取消订单</button>
			@else
			<div style="float:left;font-size:16px;margin-top:9px;margin-left:15px;color:red;cursor:pointer;">
				已取消
			</div>
			@endif
			
		</div>
		
		
		<div style="float:left;width:100%;height:115px;background-color:#CDBA96;">
			
			<!-- 商品图片 -->
			<div style="float:left;width:500px;margin-left:20px;height:115px;">
			
				@forelse( $details[$order_key] as $detail  )
				<div style="float:left;width:100px;margin-top:5px;margin-left:10px;">
					<div style="float:left;width:100px;text-align:left;font-size:15px;color:#F0FFF0;">
					{{ $detail->name }}
					</div>
					<div style="float:left;margin-top:3px;">
						<img style="width:80px;" src="{{ $detail->pic_url }}" />
					</div>
					<div style="float:left;width:100px;margin-top:5px;text-align:left;font-size:17px;color:#F0FFF0;">
					{{ $detail->num }} *  {{ $detail->price }} 
					</div>
				</div>
				@empty
				@endforelse
			</div>
			<!-- 消费群体 -->
			<div style="float:left;width:150px;margin-left:10px;font-size:20px;margin-top:35px;text-align:left;">
				{{ $order->phone }}
			</div>
			<!-- 交易金额 -->
			<div style="float:left;width:100px;margin-left:30px;font-size:20px;margin-top:35px;text-align:left;">
				{{ $order->need_to_pay }}
			</div>
			<!-- 下单时间 -->
			<div style="float:left;width:200px;margin-left:30px;font-size:20px;margin-top:35px;text-align:left;">
				{{ $order->create_at }}
			</div>
		</div>
	</div>
	@empty
		<h1 style="margin-left:10%;" >无相关订单</h1>
	@endforelse
	
</div>


<!-- 分页 -->
<div style='text-align:center;'>
	{{ $orders->appends(['keyword'=>$request])->links() }}
</div>
<div class="badge" style="width:100%;text-align:center;font-size:18px;margin-bottom:70px;" >
		共{{ $orders->total() }}条数据
</div>


@extends('common.footer')